<template>
	<view class="container">
		<!-- 预约成功提示 -->
		<view class="success-message">
			<view class="iconfont"><text class="duigou">✔</text></view>
			<text>预约成功</text>
		</view>

		<!-- 扫码入园提示 -->
		<view class="scan-qrcode">
			<uni-row>
				<uni-col :span="4">
					<view class="iconfont2">
						<image class="iconfont3" src="../../static/saoma.png" mode=""></image>
					</view>
				</uni-col>
				<uni-col :span="20">
					<view>
						<view><text class="centext1">扫码入园</text></view>
						<view><text class="centext2">Scan the QR code to enter the park</text></view>
					</view>
				</uni-col>
			</uni-row>


		</view>

		<text class="section-title">预约信息</text>
		
	     <view v-if="combinedData?.reserveRecordInfo?.type !== undefined">
		 <view class="info-section" @click="toperson">
			<view class="info-item">
				<text class="item-label">预约类型：</text>
				<text class="item-value">{{ combinedData.reserveRecordInfo.type}}</text>
			</view>

			<view class="info-item">
				<text class="item-label">姓名：</text>
				<text class="item-value">{{ combinedData.reserveRecordInfo.personalInfo.name }}</text>
			</view>
			<view class="info-item">
				<text class="item-label">证件类型：</text>
				<text class="item-value">{{ combinedData.reserveRecordInfo.personalInfo.certificateType }}</text>
			</view>
			<view class="info-item">
				<text class="item-label">证件号码：</text>
				<text class="item-value">{{ combinedData.reserveRecordInfo.personalInfo.certificateNumber }}</text>
			</view>
			<view class="info-item">
				<text class="item-label">手机号码：</text>
				<text class="item-value">{{ combinedData.reserveRecordInfo.personalInfo.phoneNumber }}</text>
			</view>

			<view class="info-item">
				<text class="item-label">同行儿童数：</text>
				<text class="item-value">{{ combinedData.reserveRecordInfo.personalInfo.childCount }}人</text>
			</view>
			<view class="info-item">
				<text class="item-label">同行成人：</text>
				<text class="item-value"> <template
						v-for="(companion, index) in combinedData.reserveRecordInfo.personalInfo.companions"
						:key="index">
						{{ companion.name }}
						<!-- 如果不是最后一个成人，则添加逗号分隔 -->
						<text v-if="index <combinedData.reserveRecordInfo.personalInfo.companions.length - 1">、</text>
					</template></text>
			</view>
			</view>
		</view>
		
		<view v-if="combinedData?.reserveRecords?.type !== undefined">
		<view class="info-section" @click="togroup"> 
			<view class="info-item">
				<text class="item-label">预约类型：</text>
				<text class="item-value">{{ combinedData.reserveRecords.type }}</text>
			</view>
			<view class="info-item">
				<text class="item-label">负责人姓名：</text>
				<text class="item-value">{{ combinedData.reserveRecords.groupInfo.name }}</text>
			</view>
			<view class="info-item">
				<text class="item-label">证件号码：</text>
				<text class="item-value">{{ combinedData.reserveRecords.groupInfo.idNumber }}</text>
			</view>
			<view class="info-item">
				<text class="item-label">手机号码：</text>
				<text class="item-value">{{ combinedData.reserveRecords.groupInfo.phoneNumber }}</text>
			</view>
			<view class="info-item">
				<text class="item-label">团体名称：</text>
				<text class="item-value">{{ combinedData.reserveRecords.groupInfo.groupName }}</text>
			</view>
			<view class="info-item">
				<text class="item-label">团体人数：</text>
				<text class="item-value">{{ combinedData.reserveRecords.groupInfo.numberOfPeople }}人</text>
			</view>
			</view>
		</view>



	<!-- 取消预约按钮 -->
	<button @click="cancelReservation" class="primary">取消预约</button>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const combinedData = ref({});
	const reserveRecordInfo = ref({});
	const reserveRecords = ref({});
	onLoad((options) => {
		// 从URL参数中获取预约记录信息
		if (options.combinedData) {
			combinedData.value = JSON.parse(decodeURIComponent(options.combinedData));
			// 在这里可以处理reserveRecordInfo.value，例如显示在页面上
		}

	});

	function cancelReservation() {
		console.log("取消预约");
		// 在取消预约之前，更新全局数据
		const app = getApp();
		app.globalData.reserveRecordInfo = null; // 清空全局预约记录信息
		app.globalData.reserveRecords = null;
		uni.switchTab({
			url: '/pages/reserveRecord/reserveRecord'
		});
	}

</script>

<style scoped>
	.container {
		padding: 20px;
		background: #F3F5F9;
	}

	.success-message {
		text-align: center;
		height: 130px;
	}

	.iconfont {
		margin: 22px auto;
		border-radius: 50%;
		width: 60px;
		height: 60px;
		background: #8DCB6D;
	}

	.duigou {
		line-height: 60px;
		color: #FFFFFF;
		font-size: 28px;
	}



	.scan-qrcode {
		height: 50px;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 6px;
		padding: 15px 20px;
		margin-bottom: 10px;
	}

	.iconfont2 {
		margin-top: 7px;
		width: 40px;
		height: 40px;
	}

	.iconfont3 {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}


	.centext1 {
		font-weight: 600;
		font-size: 15px;
		color: #05261B;
		letter-spacing: 0;
	}

	.centext2 {
		position: absolute;
		font-weight: 400;
		font-size: 13px;
		color: #05261B;
		letter-spacing: 0;
		margin-top: 10rpx;
	}

	.info-section {
		background-color: #f9f9f9;
		border-radius: 8rpx;
		padding: 24rpx;
		margin-bottom: 40rpx;
	}

	.section-title {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 12rpx;
		margin-top: 30px;
	}

	.info-item {

		align-items: center;
		padding: 10px 0;
	}

	.item-label {
		width: 200rpx;
		color: #333;
		font-size: 28rpx;
	}

	.item-value {
		flex-grow: 1;
		text-align: right;
		color: #666;
		font-size: 26rpx;
		color: #000;
	}

	.label {
		font-weight: bold;
	}

	button {
		width: 100%;
		margin-top: 30px;
	}

	.primary {
		height: 45px;
		background: #8DCB6D;
		border-radius: 25px;
		color: #fff;
	}
</style>